#color{
  width: 100%;
  height: 100%;
  background: #F4F4F4;
  border-top: 1px solid #F4F4F4;
>div{
  width: 100%;
  height: 100%;
}
}
.allcolor{
  width: 100%;
  height: 37px;
  background: #fff;
  text-align: center;
  line-height: 37px;
  // margin: 7.5px 0;
  margin: 7.5px 0;
  color: #00afff;
}
.colortypes{
  height: 40px;
  background: #fff;
  line-height: 40px;
  overflow: hidden;
  >div{
    width: 200%;
    height: 40px;
    span{
      // display: inline-block;
      flex-shrink:0;
      font-size: 15px;
      margin-right:20px ;
      &:nth-child(1){
        margin-left: 10px;
      }
    }
  }
}
.active{
  color: #00afff;
}

.colors{
  width:100%;
  // padding:;
  background: #fff;
  margin-top: 7.5px;

  >span{
    // padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    &:nth-child(odd){
      margin-right: 10px;
      margin-left: 10px;
    }
    // float: left;
    width: 172px;
    height: 36px;
    // line-height: 36px;
    // text-align: center;
    border: 1px solid #3aacff;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: inline-block;
    >span{

      display: inline-block;
      box-sizing: border-box;

      &:nth-child(1){
        margin-left: 10px;
        margin-right: 5px;
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border: 1px solid #818181;
        vertical-align: -5px;
      }
      &:nth-child(2){
        line-height: 34px;
        // height: 36px;
      }
    }
  }
}